<!--  -->
<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="医院名称">
              <el-input v-model="form.hospital_name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目分类">
              <el-select v-model="form.category_id" clearable placeholder="请选择">
                <el-option
                  v-for="item in projectList"
                  :key="item.id"
                  :label="item.category_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称">
              <el-input v-model="form.project_name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户姓名">
              <el-input v-model="form.realname" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户手机号">
              <el-input v-model="form.user_phone" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报单状态">
              <el-select v-model="form.tr_status" clearable placeholder="请选择">
                <el-option
                  v-for="item in formStatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="推荐人姓名">
              <el-input v-model="form.ref_realname" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="推荐人手机号">
              <el-input v-model="form.ref_phone" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" @click="handleExport">导出</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 主页列表 -->
      <div v-loading="tableLoading" class="listDiv">
        <!-- table列表 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="50"
            align="center"
            :index="table_index"
          />
          <el-table-column prop="hospital_name" label="医院" align="center" />
          <el-table-column prop="category_name" label="项目分类" align="center" />
          <el-table-column prop="dd_project_name" label="项目名称" align="center" width="120px" />
          <el-table-column prop="project_price" label="项目金额" align="center" width="100px" />
          <el-table-column prop="hospital_price" label="医院结算金额" align="center" width="110px" />
          <el-table-column prop="realname" label="用户姓名" align="center" width="110px" />
          <el-table-column prop="user_pone" label="用户手机号" align="center" width="110px" />
          <el-table-column prop="ref_realname" label="推荐人姓名" align="center" width="110px" />
          <el-table-column prop="ref_pone" label="推荐人手机号" align="center" width="110px" />
          <el-table-column prop="declare_realname" label="报单人" align="center" />
          <el-table-column prop="create_time" label="报单时间" align="center" width="160px" />
          <el-table-column prop="dd_remark" label="备注" align="center" />
          <el-table-column prop="dd_images_list" label="付款凭证" align="center" width="130px">
            <template slot-scope="scope">
              <div
                style="color: #409eef; cursor:pointer"
                v-for="(item,index) of scope.row.dd_images_list"
                :key="index"
                @click="toCredentials(item)"
              >查看凭证{{index+1}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="tr_status_name" label="报单状态" align="center" />
          <el-table-column prop="to_examine_time" label="初审时间" align="center" width="160px" />
          <el-table-column prop="complete_time" label="完成项目时间" align="center" width="110px" />
          <el-table-column prop="write_off_realname" label="核销人" align="center" />
          <el-table-column prop="write_off_time" label="核销时间" align="center" width="160px" />
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <!-- tr_status 1待审核 2通过 3驳回-->
              <el-button
                v-if="scope.row.tr_status==1"
                type="text"
                size="small"
                @click="toRoutes('formChecked',scope.row,'check')"
              >审核</el-button>
              <!-- write_off_status 核销状态1通过 -->
              <el-button
                type="text"
                v-if="scope.row.tr_status == 2 && scope.row.write_off_status == 1"
                size="small"
                @click="rewardetail(scope.row.dd_id)"
              >奖励详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="form.page"
              :page-sizes="page_sizes"
              :page-size="form.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 查看凭证 -->
    <!--  @close="clear" -->
    <el-dialog title :visible.sync="dialogimgVisible" width="80%">
      <img :src="imgUrl | imgUrlFn" alt />
    </el-dialog>
    <!-- 奖励详情弹窗 -->
    <el-dialog title="奖励详情" :visible.sync="dialogFormVisible" width="50%" center>
      <div v-loading="tableLoading1">
        <el-table :data="tableData1" class="tableData1" style="width: 100%" border>
          <el-table-column prop="realname" label="推荐人姓名" align="center" />
          <el-table-column prop="username" label="手机号" align="center" />
          <el-table-column prop="role_name" label="推荐人级别" align="center" />
          <el-table-column prop="reward_price" label="奖励金额" align="center" />
          <el-table-column prop="ratio" label="奖励比例" align="center" />
          <el-table-column prop="type_name" label="奖励类型" align="center" />
          <el-table-column prop="base_price" label="分成基数" align="center" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//
import {
  toList,
  getProjectList,
  toViewCertification,
  rewardList,
  traditionExport,
} from "@/api/traditionalMange";
import commonFn from "@/utils/common";
export default {
  data() {
    return {
      form: {
        hospital_name: "",
        project_name: "",
        category_id: "",
        tr_status: "",
        realname: "",
        user_phone: "",
        ref_realname: "",
        ref_phone: "",
        page: 1,
        size: 10,
      },
      formStatus: [
        { name: "待审核", id: 1 },
        { name: "审核通过", id: 2 },
        { name: "审核失败", id: 3 },
      ],
      projectList: [],
      tableData: [],
      tableData1: [], //奖励详情
      tableLoading: false,
      tableLoading1: false,
      dialogFormVisible: false,
      imgUrl: "",
      dialogimgVisible: false, //查看凭证
      page_totals: 0,
      page_sizes: [10, 30, 50, 100],
    };
  },
  filters: {
    // 图片域名地址
    imgUrlFn: function (opt) {
      return "https://img.yuepinyuemei.com/" + opt;
    },
  },
  mounted() {
    this.getList(this.form);
    this.getProject();
  },

  methods: {
    // 列表
    async getList(opt) {
      this.tableLoading = true;
      let { data: res } = await toList(opt);
      if (res.code == 200) {
        this.tableLoading = false;
        this.tableData = res.data;
        this.page_totals = res.meta.total;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 项目分类
    async getProject() {
      let { data: res } = await getProjectList();
      if (res.code == 200) {
        this.projectList = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 查看凭证
    async toCredentials(opt) {
      this.imgUrl = opt;
      // console.log("opt", opt);
      this.dialogimgVisible = true;
    },
    // 跳转
    toRoutes(name, opt, type) {
      // console.log("888");
      const route = { path: name, query: { opt: opt, type: type } };
      this.$router.push(route);
    },
    // 序号
    table_index(index) {
      return (this.form.page - 1) * this.form.size + index + 1;
    },
    // 奖励详情
    async rewardetail(order_id) {
      this.dialogFormVisible = true;
      this.tableLoading1 = true;
      let { data: res } = await rewardList({ order_id });
      console.log("res", res);
      if (res.code == 200) {
        this.tableLoading1 = false;
        this.tableData1 = res.data;
      } else {
        this.tableLoading1 = false;
      }
    },
    // 查询
    handleSearch() {
      this.form.page = 1;
      this.getList(this.form);
    },
    // 导出
    handleExport() {
      let datas = { ...this.form };
      delete datas.page;
      delete datas.size;
      traditionExport(datas)
        .then((res) => {
          // console.log("ress", res);
          commonFn.downFile("传统报单导出", res);
        })
        .catch((err) => {
          // this.errorStatus(err.message);
        });
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.size = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
  },
};
</script>
<style  scoped>
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
</style>